<template>
	<view class="content">
		<view class="flex_c">
			<view class="ss">
				<image class="ss_img" src="https://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/fuzhou/image/index/index_ss.png" mode=""></image>
				<input type="text" placeholder="请输入关键词" v-model="queryData.keywords" />
				<text @click="changeK">搜索</text>
			</view>
			<view class="navbar">
				<scroll-view :scroll-x="true" :scroll-with-animation="true" :scroll-into-view="scroll_type_id">
					<view
						class="item"
						v-for="(item, index) in typeList"
						:key="item.id"
						:class="type_index == index ? 'current' : ''"
						:id="'type_id_' + index"
						@tap="typeChange(item.id, index)"
					>
						<view class="text">
							<text>{{ item.type_name }}</text>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<view class="zhan">
			
		</view>
		<view class="" style="width: 100%;height: calc(100% - 72px);">

			<swiper style="height: 100%" :duration="300" :current="type_index" @change='changeS'>
				<swiper-item style="height: 100%;" v-for="(item1, index1) in typeList" :key='index1'>
					<scroll-view class="news_list" :lower-threshold='50' :style="'height:100%'" :scroll-y="true" :refresher-enabled='true' :refresher-triggered='isSx' @scrolltolower='getMore'	 @refresherrefresh='refresStart' @refresherrestore='refresEnd'>
						<view class="" v-for="(item,index) in list[index1]" :key='item.id' @click="toDetail(item.id)">
							<view class="item_l0" v-if="item.type==0">
								<view class="">{{item.title}}</view>
								<view class="bottom bottom1">
									<view class="flex_l">
										<text>{{item.read_num + '浏览 '}}</text>
										<text>{{item.createtime}}</text> 
									</view>
								</view>
							</view>
							
							<view class="item_l" v-if="item.type==1">
								<view class="img">
									<image v-if='item.img[0]' :src="item.img[0]" mode=""></image>
									<image v-else src="https://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/4/2020/09/huiyi.jpg" mode=""></image>
								</view>
								<view class="right_l">
									<view class=""> {{item.title.length>20?item.title.substring(0,20)+'...':item.title}}</view>
									<view class="bottom">
										<view class="flex_l">
											<text>{{item.read_num + '浏览 '}}</text>
											<text>{{item.createtime}}</text> 
										</view>
									</view>
								</view>
							</view>
							
							<view class="item_l0" v-if="item.type==2">
								<view class="">{{item.title.length>20?item.title.substring(0,20)+'...':item.title}}</view>
								<view class="img1">
									<image class="img" v-if='item.img[0]' :src="item.img[0]" mode="widthFix"></image>
									<image class="img" v-else src="https://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/4/2020/09/huiyi.jpg" mode="widthFix"></image>
								</view>
								<view class="bottom bottom1">
									<view class="flex_l">
										<text>{{item.read_num + '浏览 '}}</text> 
										<text>{{item.createtime}}</text> 
									</view>
								</view>
							</view>
							
							<view class="item_l0" v-if="item.type==3">
								<view class="">{{item.title.length>20?item.title.substring(0,20)+'...':item.title}}</view>
								<view class="img_flex">
									<image :src="item.img[0]" mode=""></image>
									<image :src="item.img[1]" mode=""></image>
									<image :src="item.img[2]" mode=""></image>
								</view>
								<view class="bottom bottom1">
									<view class="flex_l">
										<text>{{item.read_num + '浏览 '}}</text> 
										<text>{{item.createtime}}</text> 
									</view>
								</view>
							</view>
						</view>
						<endlist :isLoad='isLoad[index1]' :isfinsh='isfinsh[index1]' :length='list[index1].length'></endlist>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	import endlist from '@/components/endlist.vue'
	import {myIndustrychain , city , parklist , news2 as news ,CreateQrcode } from '../../utils/api.js'
	export default {
		data() {
			return {
				isSx:false,
				isMore:false,
				paddingBottomHeight:0,
				active_tab:0,
				city:[],
				cityList:[],
				chainList:[],
				typeList:[],
				chain_name:'',
				city_name:'',
				type_name:'',
				type_id:'',
				chain_id:'',
				city_id:'',
				sheng_index:'',
				shi_index:'',
				queryData:{
					keywords:'',
					city_id:'',
					type_id:'',
					yun_chain_id:'',
					page:1
				},
				list:[[],[],[],[],[],[],[],[],[],[],[],[],[],[],],
				type_index: 0,
				scroll_type_id: 'type_id_0',
				currentSliderIndex: 0,
				page:[1,1,1,1,1,1,1,1,1],
				listHeight:0,
				isfinsh:[false,false,false,false,false,false,false,false,false,false,false,],
				isLoad:[false,false,false,false,false,false,false,false,false,false,false,],
				isshow:false
			}
		},
		components: {
			endlist
		}, 
		beforeDestroy(){
			
		},
		onShow(){
			let chain,city
			// chain = uni.getStorageSync('yun_chain')
			city = uni.getStorageSync('myCity')
			
			if( (this.city_id==city.id) && (this.chain_id == chain.yun_chain_id) ){
				return
			}else{
				this.city_id = city.id||''
				this.city_name = city.city_name||city.name||''
				// this.chain_id = chain.yun_chain_id||''
				// this.chain_name = chain.chain_name||''
				// this.queryData.yun_chain_id = chain.yun_chain_id||''
				this.queryData.city_id =  city.id||''
				this.isfinsh = [false,false,false,false,false,false,false,false,false,false,false,]
				this.isLoad = [false,false,false,false,false,false,false,false,false,false,false,]
				// this.getNeedsList()
			}
		},
		onLoad(option) {
			uni.getSystemInfo({
				success: (res) => {
				  this.listHeight =	res.windowHeight - 72 - 36
				}
			});
			this._freshing = false
			let that = this;
			uni.getSystemInfo({
			    success: function (res) {
			        let model = ['X', 'XR', 'XS', '11', '12', '13', '14', '15'];
			        model.forEach(item => {
			            //适配iphoneX以上的底部，给tabbar一定高度的padding-bottom
			            if(res.model.indexOf(item) != -1 && res.model.indexOf('iPhone') != -1) {
			                that.paddingBottomHeight = 40;
			            }
			        })
			    }
			});
			this.type_id = option.type_id||''
			// this.type_name = option.type_name||''
			this.queryData.keywords = option.keywords||''
			news.GetNewsTypeList().then(res=>{
				this.typeList=res.data
				if(!this.type_id){
					this.type_id = this.typeList[0].id
					this.queryData.type_id = this.typeList[0].id
				}
				let index = this.typeList.findIndex(item=>item.id==this.type_id)
				this.type_name = this.typeList[index]
				this.$nextTick(()=>{
					this.getNeedsList()
				})
			})
		},
		onShareTimeline() {
			return {
				title: this.typeList[this.type_index].type_name+' | 投资钟祥',
			}
		},
		onShareAppMessage() {
			return {
				title: this.typeList[this.type_index].type_name+' | 投资钟祥',
			}
		},
		methods: {
			changeChain(chain){
				this.isshow = false
				this.chain_id = chain.yun_chain_id||''
				this.chain_name = chain.chain_name||''
				this.queryData.yun_chain_id = chain.yun_chain_id||''
				this.page=[1,1,1,1,1,1,1,1,1]
				this.getNeedsList()
			},
			showC(){
				console.log(this.isshow)
				if(this.isshow == true){
					this.isshow = false
					return
				}
				console.log(this.isshow)
				this.isshow=true
			},
			showHb(){
				uni.showLoading({ mask:true,title:'海报制作中',mask:true})
				CreateQrcode({type:1,type_id:this.type_id}).then(res=>{
					uni.hideLoading()
					if(res.status==0){
						uni.showToast({
							title:'海报制作失败...'
						})
						return
					}
					this.$refs.haibao.show(res.data.qrcode)
				})
			},
			refresStart(){
				if (this._freshing) return;
				this._freshing = true;
				this.isSx = true
				this.isfinsh[this.type_index]=false
				this.isLoad[this.type_index]=false
				this.page[this.type_index]=1
				this.getNeedsList('sx') //
			},
			refresEnd(){
				setTimeout(e =>{
					this.isSx = false
				},300)
				this._freshing = false
				uni.showToast({
					title:'加载成功',
					icon:'none'
				})
			},
			changeS(val){
				if(val.detail.current == this.type_index){
					return
				}
				let index = val.detail.current
				this.typeChange(this.typeList[index].id,index)
			},
			/*切换导航*/
			typeChange(type_id, index) {
				if(index == this.type_index){
					return
				}
				this.type_index = index
				this.type_id = type_id
				this.queryData.type_id = type_id||''
				var nextIndex = index - 1
				nextIndex = nextIndex <= 0 ? 0 : nextIndex
				this.scroll_type_id = `type_id_${nextIndex}` //动画滚动,滚动至中心位置
				
				for(let i=0;i<this.list.length;i++){
					if(i>this.type_index+2||i<this.type_index-2){
						this.list[i] = []
						this.page[i]=1
						this.isfinsh[i] = false
						this.isLoad[i] = false
					}
				}
				console.log(this.list[this.type_index])
				if(this.list[this.type_index].length==0){
					this.getNeedsList()
				// this.changeK()
				}
			},
			toPage(page,type){
				if(type == 'subPage'){
					uni.navigateTo({
						url:`/subPage/pages/${page}/${page}`
					})
					return
				}
				uni.navigateTo({
					url:`/pages/${page}/${page}`
				})
			},
			changeK(){
				this.page=[1,1,1,1,1,1,1,1,1]
				this.isfinsh = [false,false,false,false,false,false,false,false,false,false,false,]
				this.isLoad = [false,false,false,false,false,false,false,false,false,false,false,]
				this.list = [[],[],[],[],[],[],[],[],[],[],[]]
				this.getNeedsList()
			},
			getNeedsList(type){
				if(this.isfinsh[this.type_index] && type!='sx'){
					return
				}
				uni.showLoading({ mask:true,
					title:'正在加载'
				})
				this.isLoad[this.type_index]= true
				this.queryData.page = this.page[this.type_index]
				
				this.queryData.city_id = ''
					news.GetNewsList(this.queryData).then(res=>{
						if(this.queryData.page==1){
							this.list[this.type_index] = res.data.data
						}else{
							this.list[this.type_index] = this.list[this.type_index].concat(res.data.data)
						}
						if(this.queryData.page == res.data.last_page){
							this.isfinsh[this.type_index] = true
							this.isfinsh.push([])
							this.isfinsh.pop()
						}
						this.list.push([])
						this.list.pop()
						this.isMore = false
						this.isLoad[this.type_index] = false
						uni.hideLoading()
						if(type=='sx')
						this.refresEnd()
					})
			},
			toDetail(id) {
				uni.navigateTo({
					url:`/pages/newsDetail_two/newsDetail_two?id=${id}&name=${this.typeList[this.type_index].type_name}`
				})
			},
			getLoadNum(num){
					!this.isNewRenderDone&&uni.hideLoading()
					this.isNewRenderDone = true
			},
			getMore(){
				if(this.isMore || this.isfinsh[this.type_index]) return;
				this.isMore = true
				// 模拟分页请求 (加载更多)
				this.page[this.type_index] +=1
				this.getNeedsList('more')
			}
		},	
	}
</script>

<style scoped lang="scss">
.chain_v{
	position: fixed;
	top: -280px;
	box-shadow: 0 4px 4px 0 rgba($color: #000000, $alpha: .3);
	z-index: 100;
	width: 100%;
	transition: all 0.3s;
	opacity: 0.5;
	height: 0;
	overflow: auto;
}
.showChain{
	height: 350px;
	top: 105px;
	opacity: 1;
}
	.nomore{
		height: 60px;
		line-height: 60px;
		text-align: center;
		color: #888;
	}
	.loading{
		width: 100%;
		height: 60px;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 14px;
		color: #888;
		image{
			width: 32px;
			height: 32px;
			margin-right: 10px;
			animation: zhuan 1.2s linear infinite;
		}
	}
	@keyframes zhuan {
		0% {
			transform: rotate(0deg);
		}
		50% {
			transform: rotate(180deg);
		}
		100% {
			transform: rotate(360deg);
		}
	}
	.item_l{
			width: calc(100% - 20px);
			display: flex;
			// padding: 10px;
			padding: 14px 10px;
			border-bottom: 1px solid #e8e8e8;
			.img{
				width: 33%;
				height: 80px;
				margin-right: 10px;
				border-radius: 4px;
				overflow: hidden;
				position: relative;
			}
			.type_t{
				height: 22px;
				width: 70px;
				text-align: center;
				line-height: 22px;
				background-color: #ff9933;
				color: #fff;
				right: -18px;
				top: 6px;
				font-size: 12px;
				transform: rotate(45deg);
				position: absolute;
			}
			image{
				width: 100%;
				height: 100%;
			}
			.right_l{
				width: calc(65% - 10px);
				
				font-size: 16px;
				color: #000;
				position: relative;
			}
		}
		.bottom{
			position: absolute;
			bottom: 2px;
			width: 100%;
			.flex_l{
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 12px;
				color: #888;
				margin-top: 2px;
				width: 100%;
				image{
					width: 12px;
					height: 12px;
					min-width: 12px;
					margin-right: 4px;
				}
			}
		}
		.item_l0{
			width: calc(100% - 20px);
			padding: 14px 10px;
			border-bottom: 1px solid #e8e8e8;
			font-size: 16px;
			.img{
				width: 100%;
				border-radius: 8px;
			}
			.img1{
				width: 100%;
				max-height: 150px;
				margin: 8px 0 5px;
				border-radius: 8px;
				overflow: hidden;
			}
			.img_flex{
				width: 100%;
				display: flex;
				justify-content: space-between;
				margin: 8px 0 5px;
				image{
					border-radius: 4px;
					width: 32%;
					height: 80px;
				}
			}
		}
		.bottom1{
			position: relative;
			bottom: -2px;
		}
	
page{
	height: 100%;
	width: 100%;
}
.content {
	height: 100%;
	width: 100%;
}
.zhan{
	width: 100%;
	height: 72px;
}
	.flex_c{
		width: 100%;
		// height: 44px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: fixed;
		flex-wrap: wrap;
		top: 0;
		z-index: 1000;
		background-color: #3BA7FF;
		box-shadow: 0px 2px 5px 0 #f1f1f1;
		.ss{
			width: 100%;
			display: flex;
			align-items: center;
			margin: 0 10px;
			margin-bottom: 4px;
			position: relative;
			background-color: #fff;
			border-radius: 15px;	
			padding-left: 14px;
			.ss_img{
				width: 16px;
				height: 16px;
			}
			input{
				width: calc(80% - 20px);
				padding-left: 10px;
				height: 32px;
				font-size: 15px;
			}
						text{
							position: absolute;
							display: inline-block;
							right: 3px;
							height: 28px;
							line-height: 28px;
							border-radius: 14px;
							width: 60px;
							background: linear-gradient(90deg, #40A9FF99 0%, #40A9FF 100%);
							color: #fff;
							text-align: center;
							z-index: 10;
						}
					}
			}
		.pic{
			width: calc(33% - 20px) !important;
			text-align: center;
			font-size: 14px;
		}
		.pic1{
			width: 100%;
			margin-bottom: 8px;
		}
		.select{
			width: calc(100% - 20px);
			height: 32px;
			color: #333;
			line-height: 32px;
			background-color: #fff;
			border-radius: 4px;
			padding: 0 10px;
			position: relative;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			&::after{
				content: ' ';
				position: absolute;
				background: url(https://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/4/2020/09/xiala.png) no-repeat;
				background-size: 100% 100%;
				width: 6px;
				height: 6px;
				top: 14px;
				margin-left: 10px;
			}
		}
		.select_a{
			color: #333;
		}
		.text_a{
			width: calc(100% - 20px);
			background-color: #fff;
			border-radius: 4px;
			height: 110px;
			padding: 10px;
		}
		.news_list{
			width: 100%;
			// position: relative;
		}
.navbar {
		/*分类*/
		width: 100%;
		// height: 36px;
		position: sticky;
		top: 0;
		z-index: 10;
		background-color: #fff;
		scroll-view {
			width: calc(100% - 30px);
			margin: 0 30rpx;
			white-space: nowrap;
			position: relative;
			.item {
				position: relative;
				display: inline-block;
				margin: 6px 12px 8px;
				// height: 80rpx;
				text-align: left;
				padding-top: 7rpx;
				font-size: 16px;
				//line-height: 80rpx;
				&:first-child {
					margin-left: 10rpx;
				}
				&:after {
					content: '';
					width: 0;
					height: 0;
					position: absolute;
					left: 50%;
					bottom: 0;
					transform: translateX(-50%);
					transition: 0.3s;
				}
				.text {
					position: relative;
					width: auto;
					height: auto;
					line-height: auto;
					display: inline-block;
					text {
						font-size: 15px;
						// font-weight: bold;
						color: #333;
					}
					image {
						position: absolute;
						top: 5px;
						right: -14rpx;
						width: 50rpx;
						height: 50rpx;
						display: none;
					}
				}
			}
			.current {
				&:after {
					width: 50%;
				}
				.text {
					position: relative;
					padding-bottom: 4px;
					text {
						font-size: 16px;
						font-weight: bold;
						color: #3BA7FF;
					}
					image {
						display: block;
					}
					&:after {
						content: '';
						bottom: -2px;
						left: 50%;
						transform: translateX(-50%);
						width: 40px;
						height: 3px;
						border-radius: 1.5px;
						background-color: #3BA7FF;;
						position: absolute;
					}
				}
			}
		}
	}
	.list {
		width: 70rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		//box-shadow: -4rpx 0 0 #e9ebee;
		//box-shadow: -2px 0 0 #262626;
		&::v-deep .icon {
			font-size: 36rpx;
			margin-top: -6rpx;
		}
	}

</style> 
